<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" inline size="small">
                    <el-form-item label="匹配进度才可预约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="可预约几天" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约需提前" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="取消预约提前" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="当天约当天" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车绑学员" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="每日限同时约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="每周限预约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科二限预约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科三限预约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布模式" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否开启预约" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="自动初始化天数" label-width="130px">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约需在" label-width="100px">
                        <el-date-picker v-model="form.name" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small" icon="el-icon-search">保存配置</el-button>
                        <el-button type="primary" size="small" icon="el-icon-plus">新增练车</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 605px;">
                <el-table :data="tableData" height="100%" border stripe
                    :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column prop="line" label="排序" sortable align="center" />
                    <el-table-column prop="pid" label="默认值" sortable align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.id" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" sortable label="创建时间" align="center" />
                    <el-table-column prop="car" sortable label="类型名称" align="center" />
                    <el-table-column prop="com_namestr" sortable label="类型1" align="center" />
                    <el-table-column prop="edittime" sortable label="类型2" align="center" />
                    <el-table-column prop="pid" label="启用状态" sortable align="center">
                        <template slot-scope="scope">
                            <el-tag>{{ scope.row.id || 1 }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template>
                            <el-button type="text" size="small">编辑</el-button>
                            <el-button type="danger" size="small" class="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="pagin">
                <el-pagination background :current-page="Params.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="Params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change='handleSizeChange' @current-change='handleCurrentChange' />
            </div>
        </footer>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-12-04 11:42:57  星期一
* @description   学员练车已预约
**/


export default {
    name: 'booked',
    data() {
        return {
            form: {
                name: '',
                region: ''
            },
            tableData: [],
            Params: {
                page: 1,
                pageSize: 20
            },
            total: 0
        }
    },
    methods: {
        // 一页几条数据
        handleSizeChange(val) {
            this.Params.pageSize = val
        },
        // 当前页
        handleCurrentChange(val) {
            this.Params.page = val
        },
    }
}
</script>

<style lang="scss" scoped></style>